<template>
    <div class="updatePhone">
      <up-form
        labelPosition="left"
        labelWidth="150rpx"
        labelStyle="font-size:28rpx;"
        customStyle="margin:0"
        :model="updatePhone"
      >
        <up-form-item label="原手机号" prop="oldPhone" borderBottom>
          <up-input
            v-model="updatePhone.oldPhone"
            border="none"
            placeholder="请输入原手机号"
          ></up-input>
        </up-form-item>
        <up-form-item label="新手机号" prop="newPhone" borderBottom>
          <up-input
            v-model="updatePhone.newPhone"
            border="none"
            placeholder="请输入新手机号"
          ></up-input>
        </up-form-item>
        <up-form-item label="验证码" prop="msgCode" borderBottom>
          <up-input
            v-model="updatePhone.msgCode"
            border="none"
            placeholder="请输入验证码"
          >
            <template #suffix>
              <div class="getCode" @click="getCode">
                {{ isSend ? "已发送" : "获取验证码" }}
              </div>
            </template>
          </up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="update" @click="okUpdate">确认换绑</div>
    <img src="./img/bg_shoujibangding.png" alt="" class="bg" />
  </template>
  
  <script setup>
  import { ref, reactive } from "vue";
  import * as utils from "../../utils/utils";
  import * as http from "../../utils/http";
  const updatePhone = reactive({
    oldPhone: "",
    newPhone: "",
    msgCode: "",
  });
  // 是否发送
  const isSend = ref(false);
  // 发送短信验证码定时器
  let nums = 60;
  // 发送短信验证码
  const getCode = () => {
    if (!isSend) {
      if (
        utils.checkMobile(updatePhone.oldPhone) &&
        utils.checkMobile(updatePhone.newPhone)
      ) {
        http.sendSmsCode({ userNo: store.userNo }).then((res) => {
          isSend.value = true;
          let nums = 60;
          let timer = setInterval(() => {
            nums--;
            if (nums < 0) {
              isSend.value = false;
            }
          }, 1000);
          wx.showToast({
            title: "已发送",
            mask: "true",
            icon: "none",
            duration: 1000,
          });
        });
      } else {
        wx.showToast({
          title: "请您正确填写手机号",
          mask: "true",
          icon: "none",
          duration: 1000,
        });
      }
    } else {
      wx.showToast({
        title: "请您" + nums + "s后再试",
        mask: "true",
        icon: "none",
        duration: 1000,
      });
    }
  };
  // 确认换绑
  const okUpdate = () => {
    if (
      utils.checkMobile(updatePhone.oldPhone) &&
      utils.checkMobile(updatePhone.newPhone) &&
      updatePhone.msgCode
    ) {
      http
        .phoneExchangeBind({
          originPhone: updatePhone.oldPhone,
          newPhone: updatePhone.newPhone,
          smsCode: updatePhone.msgCode,
        })
        .then((res) => {
          wx.reLaunch({
              url: "../login/login",
            });
        });
    }
  };
  </script>
  
  <style scoped lang="scss">
  .updatePhone {
    padding: 0 50rpx;
  }
  .getCode {
    color: #406eb0;
  }
  .update {
    width: 590rpx;
    height: 88rpx;
    margin: 200rpx 80rpx;
    border-radius: 44rpx;
    line-height: 88rpx;
    text-align: center;
    background-image: linear-gradient(to right, #619df1, #4478c1);
    color: #fff;
    font-size: 32rpx;
  }
  .bg {
    width: 750rpx;
    height: 1160rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -999;
  }
  </style>
  